/**
 * 构造的是表盘上的圆点
 * index表示表盘上点的索引 从0开始 最顶端的为0  必须要有的参数
 * color表示表盘上点的颜色
 */
function Dial(index, color) {
  this.index = index;
  this.fillColor = color || 'red';
  Control.call(this);
}
Dial.prototype = Object.create(Control.prototype);
Dial.prototype.constructor = Dial;
Dial.prototype.show = function () {
  Control.prototype.show.call(this);
  this.ele.style.borderRadius = '50%';
};
Dial.prototype.layout = function () {
  //每隔五个设置不同的大小
  var width =
    this.index % 5 == 0 ? Control.cRadius * 0.06 : Control.cRadius * 0.04;
  this.ele.style.width = width + 'px';
  this.ele.style.height = width + 'px';

  /**
   * 表盘弧线的半径
   */
  var dialRadius = Control.cRadius * 0.8;
  var Angel = this.index * 6;
  var x = Control.cWidth / 2 + Math.sin((Angel * Math.PI) / 180) * dialRadius;
  var y = Control.cHeight / 2 + Math.cos((Angel * Math.PI) / 180) * dialRadius;

  this.ele.style.left = x - width / 2 + 'px';
  this.ele.style.top = y - width / 2 + 'px';
};
